<template>
  <div :id="id" class="typed-container"></div>
</template>

<!-- 打字机效果 -->
<script>
import { onMounted, onBeforeUnmount } from "vue";
import Typed from "typed.js";
import MarkdownIt from "markdown-it";

export default {
  name: "TypedComponent",
  props: {
    strings: {
      type: Array,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const id = `typedjs-${Math.random().toString(36).substring(2, 15)}`;
    let typedInstance = null;
    const md = new MarkdownIt();

    onMounted(() => {
      typedInstance = new Typed(`#${id}`, {
        ...props.options,
        strings: [md.render(props.strings[0])],
        showCursor: false,
        typeSpeed: 100, // 打字速度
        backSpeed: 50,
      });
    });

    onBeforeUnmount(() => {
      if (typedInstance) {
        typedInstance.destroy();
      }
    });

    return {
      id,
    };
  },
};
</script>

<style scoped>
.typed-container {
  word-break: break-all;
  word-wrap: break-word;
  max-width: 420px;
}
</style>
